<template>
    <div class="main">
        <transition name="bounce">
            <pic-show :picList="caseInfo.b3.list" @close="closePicShow" v-if="picSlideShow" :active="picShowActive" @activeChange="activeChange" ref="picShow"></pic-show>
        </transition>
        <transition name="bounce">
            <coating v-if="showCoat" :bm-info-window="bmInfoWindow" @close="switchCoat" />
        </transition>
        <transition name="slide-fade">
            <case-info :caseInfo="caseInfo" v-if="showCaseInfo" @close="caseInfoClose" @openPicShow="openPicShow" />
        </transition>
        <div class="header">
            <div class="name">
                <div id="time"></div>
                <div class="weather">
                    <div id="he-plugin-simple"></div>
                </div>
            </div>
            <div class="center">
                <div class="bigTitle">忻州市行政执法数据中心</div>
                <div class="nav">
                    <div class="active"><span>总体态势</span></div>
                    <div><span>数据分析</span></div>
                    <div><span>预警中心</span></div>
                    <div><span>执法视频</span></div>
                </div>
            </div>
            <div class="right">
                <div class="userBox">
                    <div>
                        <el-avatar :src="require('@/static/img/avatar.jpg')"></el-avatar>
                    </div>
                    <div>admin</div>
                    <div class="back">
                        <router-link to="/main">
                            <b class="iconfont icon-demo17"></b>主页
                        </router-link>
                    </div>
                    <div @click="clickFullscreen">
                        <span class="iconfont icon-quanping"></span>
                        <template v-if="isFull">退出全屏</template>
                        <template v-else>全屏</template>
                    </div>
                    <div @click="window.close()">
                        <b class="iconfont icon-tuichu"></b>退出
                    </div>
                </div>

            </div>
        </div>
        <section class="tbody">
            <div class="left">
                <select class="select">
                    <option value="2020">2020年</option>
                    <option value="2019">2019年</option>
                    <option value="2018">2018年</option>
                </select>
                <div></div>
                <div class="box">
                    <div class="title">法治监督</div>
                    <div class="cont">
                        <div class="pieSum">
                            <span>总计</span>
                            <b>4,537</b>
                        </div>
                        <div id="pie"></div>
                    </div>
                </div>
                <div class="box tabs">
                    <div class="title">
                        <h3 :class="tabH3 === 1 ? 'active' : ''" @click="tabH3Change(1)">执法案件分布</h3>
                        <h3 :class="tabH3 === 2 ? 'active' : ''" @click="tabH3Change(2)">执法部门分布</h3>
                    </div>
                    <div class="cont" id="bar">
                    </div>
                </div>
                <div class="box">
                    <div class="title">案件来源</div>
                    <div class="cont" id="line"></div>
                </div>
            </div>
            <div class="center">
                <div></div>
                <div class="btns">
                    <h3 :class="tabActive === 1 ? 'active' : ''" @click="mapChange(1)"><span>在线执法人员</span><b>30人</b></h3>
                    <h3 :class="tabActive === 2 ? 'active' : ''" @click="mapChange(2)"><span>当日执法案件</span><b>120件</b></h3>
                </div>
                <div class="mapBox">
                    <div class="legend" v-if="tabActive === 1">
                        <div class="item">
                            <span class="red"></span><b>执法中</b>
                        </div>
                        <div class="item">
                            <span class="green"></span><b>在线</b>
                        </div>
                    </div>
                    <div class="hotLegend"></div>
                    <div class="mapType">
                        <div :class="mapTypeActive === 1 ? 'active' : ''" @click="mapTypeChange('BMAP_NORMAL_MAP', 1)">
                            <img src="@/static/img/bigData/mapType1.jpg" alt="">
                        </div>
                        <div :class="mapTypeActive === 2 ? 'active' : ''" @click="mapTypeChange('BMAP_SATELLITE_MAP', 2)">
                            <img src="@/static/img/bigData/mapType2.jpg" alt="">
                        </div>
                        <div :class="mapTypeActive === 3 ? 'active' : ''" @click="mapTypeChange('BMAP_HYBRID_MAP', 3)">
                            <img src="@/static/img/bigData/mapType3.jpg" alt="">
                        </div>
                    </div>
                    <baidu-map class="map" ak="slvVeh8ZaiHOsX4BiMSRMxX6BcAO6lUI" :center="map.center" :zoom="map.zoom" :map-type="map.type" :scroll-wheel-zoom="true" :inertial-dragging="true" :map-click="false" ref="map">
                        <template v-if="tabActive === 1">
                            <bm-boundary name="山西省长治市襄垣县" :strokeWeight="2" strokeColor="blue" fillColor=""></bm-boundary>
                            <template v-for="(person, index) in personList">
                                <bm-marker :position="person.position" :icon="person.icon" @click="showWindow(index)" @close="closeWindow" @dblclick="zoomMax(index)" :key="person.id" />
                            </template>
                            <bm-info-window :position="bmInfoWindow.position" :offset="{width: 0, height: -20}" :show="bmInfoWindow.show" @open="showInfoWindow" @close="closeWindow">
                                <div class="showModel">
                                    <div class="pic">
                                        <img :src="bmInfoWindow.pic" :alt="bmInfoWindow.name">
                                    </div>
                                    <div class="text">
                                        <span class="name">{{ bmInfoWindow.name}}</span>
                                        <span>单位：{{ bmInfoWindow.workUnits }}</span>
                                        <span>执法证号：529900ZF00020017</span>
                                        <hr />
                                        <div class="zx">
                                            <div class="zf_left" @click="caseInfoOpen">当前执法案件<br />立字〔2020〕5号</div>
                                            <img src="@/static/img/bigData/video.svg" @click="switchCoat" alt="直击现场">
                                        </div>
                                    </div>
                                </div>
                            </bm-info-window>
                        </template>
                        <template v-if="tabActive === 2">
                            <bm-boundary name="山西省长治市襄垣县" :strokeWeight="2" strokeColor="blue" fillColor=""></bm-boundary>
                            <bml-heatmap :data="hotData" :max="100" :radius="20"></bml-heatmap>
                        </template>
                    </baidu-map>
                </div>
            </div>
            <div class="right">
                <div class="box hasIcon">
                    <div>
                        <span class="iconfont icon-bumen"></span>
                        <h3>
                            <i>执法主体</i>
                            <b>500</b>
                        </h3>
                    </div>
                    <div>
                        <span class="iconfont icon-renyuan"></span>
                        <h3>
                            <i>执法人员 </i>
                            <b>4000</b>
                        </h3>
                    </div>
                </div>
                <div class="box yujing">
                    <div class="leftTitle">执法<br>预警</div>
                    <div class="icons">
                        <b>3</b><span>简易</span>
                    </div>
                    <div class="icons">
                        <b>1</b><span>一般</span>
                    </div>
                    <div class="icons">
                        <b>0</b><span>重大</span>
                    </div>
                </div>
                <div class="box">
                    <div class="title">实时动态</div>
                    <div class="cont">
                        <div class="table">
                            <dl>
                                <dt>时间</dt>
                                <dt>机构</dt>
                                <dt>对象</dt>
                                <dt>上报人</dt>
                            </dl>
                            <div class="bm_cont" id="bm_cont"  @mouseover="clearScroll('s2')" @mouseleave="startScroll('s2')">
                                <ul id="ul1">
                                    <template v-for="(item, index) in dynamic">
                                        <li :key="index">
                                            <span>{{ item.time }}</span>
                                            <span>{{item.department}}</span>
                                            <span>{{ item.dName }}</span>
                                            <span>{{ item.name }}</span>
                                        </li>
                                    </template>
                                </ul>
                                <ul id="ul2"></ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="title">执法单位考核</div>
                    <div class="cont">
                        <div class="ranking" id="ranking" @mouseover="clearScroll('s3')" @mouseleave="startScroll('s3')">
                            <ul id="rk1">
                                <template v-for="(item,index) in departmentName">
                                    <li :key="index"><span><b>{{ index + 1 }}</b></span><span>{{ item }}</span></li>
                                </template>
                            </ul>
                            <ul id="rk2"></ul>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="title">执法结果公示</div>
                    <div class="cont">
                        <div class="slide" id="bm_content" @mouseover="clearScroll('s1')" @mouseleave="startScroll('s1')">
                            <div id="tb1">
                                <div>
                                    <span>中铁四局集团有限公司</span>
                                    <span>园林绿化准予行政许可决定书</span>
                                    <span>2020/08/21  定襄县绿化园林局</span>
                                </div>
                                <div>
                                    <span>中铁四局集团有限公司</span>
                                    <span>园林绿化准予行政许可决定书</span>
                                    <span>2020/08/21  定襄县绿化园林局</span>
                                </div>
                                <div>
                                    <span>中铁四局集团有限公司</span>
                                    <span>园林绿化准予行政许可决定书</span>
                                    <span>2020/08/21  定襄县绿化园林局</span>
                                </div>
                                <div>
                                    <span>中铁四局集团有限公司</span>
                                    <span>园林绿化准予行政许可决定书</span>
                                    <span>2020/08/21  定襄县绿化园林局</span>
                                </div>
                                <div>
                                    <span>中铁四局集团有限公司</span>
                                    <span>园林绿化准予行政许可决定书</span>
                                    <span>2020/08/21  定襄县绿化园林局</span>
                                </div>
                                <div>
                                    <span>中铁四局集团有限公司</span>
                                    <span>园林绿化准予行政许可决定书</span>
                                    <span>2020/08/21  定襄县绿化园林局</span>
                                </div>
                            </div>
                            <div id="tb2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import PieOption from '@/views/bigDate/PieOption'
import BarOption from '@/views/bigDate/BarOption'
import LineOption from '@/views/bigDate/LineOption'
import BaiduMap from 'vue-baidu-map/components/map/Map'
import { BmBoundary, BmMarker, BmInfoWindow, BmlHeatmap } from 'vue-baidu-map'
import HotData from '@/views/bigDate/HotData'
import CaseInfo from '@/components/CaseInfo'
import PicShow from '@/components/PicShow'
import screenFull from 'screenfull'
import Coating from '@/components/Coating'
const size = {
    width: 50, height: 50
}
const icons = {
    red: {
        url: require('@/static/img/bigData/red.svg'),
        size
    },
    green: {
        url: require('@/static/img/bigData/green.svg'),
        size
    }
}
export default {
    name: 'BigData',
    data () {
        return {
            picSlideShow: false,
            picShowActive: 0,
            showCaseInfo: false,
            tabH3: 1,
            s1: {
                scrollMove: '',
                l1: '',
                l2: '',
                box: ''
            },
            s2: {
                scrollMove: '',
                l1: '',
                l2: '',
                box: ''
            },
            s3: {
                scrollMove: '',
                l1: '',
                l2: '',
                box: ''
            },
            tabActive: 1,
            mapTypeActive: 3,
            map: {
                center: { lng: 112.733538, lat: 38.41769 },
                zoom: 14,
                type: 'BMAP_HYBRID_MAP'
            },
            bmInfoWindow: {
                id: 'slkj',
                show: false,
                position: {},
                name: '',
                pic: '',
                workUnits: ''
            },
            personList: [{
                id: 1,
                pic: require('@/static/img/zhoucheng.jpg'),
                name: '周成',
                dw: '忻府区城市管理局',
                icon: icons.red,
                position: { lng: 112.733538, lat: 38.41769 }
            }, {
                id: 2,
                name: '张勇',
                pic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3349645315,360982305&fm=26&gp=0.jpg',
                dw: '忻府区城市建设管理局',
                icon: icons.green,
                position: { lng: 112.724783, lat: 38.422639 }
            }, {
                id: 3,
                name: '高立鹏',
                pic: require('@/static/img/avatar.jpg'),
                dw: '忻府区生态环境局',
                icon: icons.red,
                position: { lng: 112.733685, lat: 38.443552 }
            }, {
                id: 4,
                name: '王晓丽',
                pic: require('@/static/img/avatar.jpg'),
                dw: '忻府区公安局',
                icon: icons.green,
                position: { lng: 112.741715, lat: 38.432639 }
            }, {
                id: 5,
                name: '王志强',
                pic: require('@/static/img/avatar.jpg'),
                dw: '忻府区生态环境局',
                icon: icons.green,
                position: { lng: 112.733138, lat: 38.422899 }
            }, {
                id: 6,
                name: '张青青',
                pic: require('@/static/img/avatar.jpg'),
                dw: '忻府区公安局',
                icon: icons.green,
                position: { lng: 112.733138, lat: 38.399639 }
            }, {
                id: 7,
                name: '李芳芳',
                pic: require('@/static/img/avatar.jpg'),
                dw: '忻府区水利局',
                icon: icons.green,
                position: { lng: 112.741715, lat: 38.399899 }
            }, {
                id: 8,
                name: '张建立',
                pic: require('@/static/img/avatar.jpg'),
                dw: '忻府区文化旅游局',
                icon: icons.green,
                position: { lng: 112.733538, lat: 38.401899 }
            }, {
                id: 9,
                name: '王芳',
                pic: require('@/static/img/avatar.jpg'),
                dw: '忻府区水利局',
                icon: icons.green,
                position: { lng: 112.741715, lat: 38.392899 }
            }, {
                id: 10,
                name: '郝小明',
                pic: require('@/static/img/avatar.jpg'),
                dw: '忻府区水利局',
                icon: icons.green,
                position: { lng: 112.741715, lat: 38.422899 }
            }, {
                id: 11,
                name: '伊欣怡',
                pic: require('@/static/img/avatar.jpg'),
                dw: '忻府区文化旅游局',
                icon: icons.green,
                position: { lng: 112.724783, lat: 38.392899 }
            }, {
                id: 12,
                name: '李萍',
                pic: require('@/static/img/avatar.jpg'),
                dw: '忻府区公安局',
                icon: icons.green,
                position: { lng: 112.733538, lat: 38.422899 }
            }, {
                id: 13,
                name: '孙淑慧',
                pic: require('@/static/img/avatar.jpg'),
                dw: '忻府区公安局',
                icon: icons.green,
                position: { lng: 112.741715, lat: 38.422899 }
            }, {
                id: 14,
                name: '张晓丽',
                pic: require('@/static/img/avatar.jpg'),
                dw: '忻府区市场监督管理局',
                icon: icons.green,
                position: { lng: 112.733538, lat: 38.422899 }
            }, {
                id: 15,
                name: '李树翔',
                pic: require('@/static/img/avatar.jpg'),
                dw: '忻府区市场监督管理局',
                icon: icons.green,
                position: { lng: 112.724783, lat: 38.382899 }
            }, {
                id: 16,
                name: '张倩',
                pic: require('@/static/img/avatar.jpg'),
                dw: '忻府区市场监督管理局',
                icon: icons.green,
                position: { lng: 112.741715, lat: 38.422899 }
            }, {
                id: 17,
                name: '张华伟',
                pic: require('@/static/img/avatar.jpg'),
                dw: '忻府区财政局',
                icon: icons.green,
                position: { lng: 112.733538, lat: 38.442899 }
            }, {
                id: 18,
                name: '海东青',
                pic: require('@/static/img/avatar.jpg'),
                dw: '忻府区体育局',
                icon: icons.green,
                position: { lng: 112.741715, lat: 38.422899 }
            }],
            showCoat: false,
            hotData: HotData,
            pieBox: '',
            barBox: '',
            lineBox: '',
            isFull: false,
            dataShadow: [],
            yMax: 100,
            barName: ['忻府区', '定襄县', '五寨县', '河曲县', '偏关县', '神池县', '静乐县', '原平市', '宁武县', '代县', '五台县', '保德县', '繁峙县', '岢岚县'],
            departmentName: ['市发展改革委市教育局', '市工信局', '市公安局', '市民政局', '市司法局', '市财政局', '市人社局', '市自然资源局', '市生态环境局', '市住房城乡建设局', '市城市管理局', '市交通运输局', '市水利局', '市农业农村局', '市商务局', '市文化和旅游局', '市卫生健康委', '市应急管理局', '市审计局', '市市场监管局', '市体育局', '市统计局', '市政府办公室市能源局', '市人防办', '五台风景名胜管委会', '市经济开发区管委会'],
            zoomSize: 6,
            caseInfo: {
                b1: {
                    t1: '立字〔2020〕5号',
                    t2: '巡查上报',
                    t3: '行政执法',
                    t4: '忻州市城市管理局',
                    t5: '付德君 张德红',
                    t6: '七一路',
                    t7: '一般案件',
                    t8: '立案登记',
                    t9: '否',
                    t10: '2020年4月6日，我局执法队日常巡查过程中，发现七一路有混凝土车沿途抛洒、带泥上路现象。',
                    t11: '2020年4月6日，尧阳景苑工地使用的混凝土车，未采取密闭、苫盖和清洗措施，致使混凝土车沿途抛洒带泥上路，对路面造成污染，影响市容市貌。'
                },
                b2: {
                    t1: '法人',
                    t2: '乌率航',
                    t3: '统一社会信用代码',
                    t4: '91140902MAOKJAPD11',
                    t5: '13603500340',
                    t6: '忻州市忻府区云中北路御景园小区C座临街13号底商铺',
                    t7: ''
                },
                b3: {
                    t1: '现场检查（勘验）笔录、现场照片、调查笔录',
                    t2: '采取密闭、苫盖和清洗措施，致使混凝土车沿路抛洒、带泥上路，对路面造成污染，影响市市貌。',
                    t3: '《城市建筑垃圾管理办法》第十四条',
                    t4: '2020年4月6日',
                    t5: '七一北路',
                    t6: '现场发现混凝土车运输过程中，有沿路抛洒、带泥上路现象',
                    list: [{
                        type: 'img',
                        img: 'https://zhaoyaojing.91wlc.com/zhifa/a1.jpg',
                        url: 'https://zhaoyaojing.91wlc.com/zhifa/a1.jpg'
                    }, {
                        type: 'video',
                        img: 'https://zhaoyaojing.91wlc.com/zhifa/a2.jpg',
                        url: 'https://zhaoyaojing.91wlc.com/zhifa/demo.mp4'
                    }]
                },
                b4: {
                    t1: '2020年4月6日忻州市巨广升商贸有限公司混凝土运输车辆在七一路进行运输混凝土，造成沿途抛洒、带泥上路的行为，该行为给城市道路路面造成长距离污染。',
                    t2: '《城市建筑垃圾管理办法》第十四条',
                    t3: '《城市建筑垃圾管理办法》第二十三条',
                    t4: '依据《城市建筑垃圾管理办法》第二十三条规定，决定给予行政处罚5000元罚款。',
                    t5: '2020年4月9日'
                },
                b5: {
                    t1: '行政处罚',
                    t2: '罚款',
                    t3: '依据《城市建筑垃圾管理办法》第二十三条规定，本机关现责令你（单位）对运输过程中遗漏、抛洒、带泥上路路段遗漏、抛洒物立即清理，并决定给予行政处罚5000元罚款。',
                    t4: '2020年4月15日',
                    t5: '罚字〔2020〕5号',
                    t6: '附',
                    t7: '当面送达',
                    t8: '2020.04.15',
                    t9: '附'
                }
            },
            dynamic: [{
                time: '2020-09-02',
                department: '城市管理局',
                name: '于杰',
                dName: '尹洋'
            }, {
                time: '2020-09-02',
                department: '市场监督管理局',
                name: '程飞豹',
                dName: '曾发波'
            }, {
                time: '2020-09-02',
                department: '市场监督管理局',
                name: '王强',
                dName: '商志斌'
            }, {
                time: '2020-09-02',
                department: '市信访局',
                name: '张斌',
                dName: '武志远'
            }]
        }
    },
    components: {
        Coating,
        CaseInfo,
        BaiduMap,
        BmBoundary,
        BmMarker,
        BmInfoWindow,
        BmlHeatmap,
        PicShow
    },
    mounted () {
        this.pieBox = this.$echarts.init(document.getElementById('pie'))
        this.barBox = this.$echarts.init(document.getElementById('bar'))
        this.lineBox = this.$echarts.init(document.getElementById('line'))
        this.drawPie()
        this.drawBar()
        this.drawLine()
        this.getScroll('s1', 'bm_content', 'tb1', 'tb2')
        this.getScroll('s2', 'bm_cont', 'ul1', 'ul2')
        this.getScroll('s3', 'ranking', 'rk1', 'rk2')
        this.loadWeather()
        const timeBox = document.getElementById('time')
        setInterval(() => {
            timeBox.innerHTML = this.getDate()
        }, 1000)
    },
    watch: {
        picShowActive: function (value) {
            this.$refs.picShow.stop()
        }
    },
    methods: {
        clickFullscreen: function () {
            if (!screenFull.isEnabled) {
                this.$message({
                    message: 'you browser can not work',
                    type: 'warning'
                })
                return false
            }
            this.isFull = !this.isFull
            screenFull.toggle()
        },
        activeChange: function (num) {
            this.picShowActive = num
        },
        closePicShow: function () {
            this.picSlideShow = false
        },
        openPicShow: function (index) {
            this.picShowActive = index
            this.picSlideShow = true
        },
        caseInfoOpen: function () {
            this.showCaseInfo = true
        },
        caseInfoClose: function () {
            this.showCaseInfo = false
        },
        tabH3Change: function (num) {
            if (num === 1) {
                BarOption.xAxis.data = this.barName
                BarOption.series[0].data = this.barName.map(() => {
                    return Math.round(Math.random() * 1000)
                })
            } else if (num === 2) {
                BarOption.xAxis.data = this.departmentName
                BarOption.series[0].data = this.departmentName.map(() => {
                    return Math.round(Math.random() * 1000)
                })
            }
            this.tabH3 = num
            this.barBox.setOption(BarOption)
        },
        mapTypeChange: function (type, num) {
            this.map.type = type
            this.mapTypeActive = num
        },
        mapChange: function (num) {
            this.tabActive = num
            if (num === 1) {
                this.map.center = { lng: 112.733538, lat: 38.41769 }
                this.map.zoom = 18
                return false
            }
            if (num === 2) {
                this.map.center = { lng: 112.487657, lat: 38.948271 }
                this.map.zoom = 9
            }
        },
        switchCoat: function () {
            this.showCoat = !this.showCoat
        },
        zoomMax: function (index) {
            this.map.center = this.personList[index].position
            this.map.zoom = 20
        },
        closeWindow: function () {
            this.bmInfoWindow.show = false
        },
        showWindow: function (index) {
            this.bmInfoWindow.show = true
            this.bmInfoWindow.position = this.personList[index].position
            this.bmInfoWindow.name = this.personList[index].name
            this.bmInfoWindow.workUnits = this.personList[index].dw
            this.bmInfoWindow.pic = this.personList[index].pic
        },
        showInfoWindow: function () {
            this.bmInfoWindow.show = true
        },
        drawPie: function () {
            this.pieBox.setOption(PieOption)
        },
        drawBar: function () {
            const _this = this
            BarOption.xAxis.data = this.barName
            BarOption.series[0].data = this.barName.map(() => {
                return Math.round(Math.random() * 1000)
            })
            this.barBox.setOption(BarOption)
            this.barBox.on('click', function (params) {
                _this.barBox.dispatchAction({
                    type: 'dataZoom',
                    startValue: _this.barName[Math.max(params.dataIndex - _this.zoomSize / 2, 0)],
                    endValue: _this.barName[Math.min(params.dataIndex + _this.zoomSize / 2, _this.barName.length - 1)]
                })
            })
        },
        drawLine: function () {
            this.lineBox.setOption(LineOption)
        },
        newNum: function (num) {
            if (num <= 9) {
                return '0' + num
            } else {
                return num
            }
        },
        getDate: function () {
            const newDate = new Date()
            const year = newDate.getFullYear()
            const month = newDate.getMonth() + 1
            const date = this.newNum(newDate.getDate())
            const hours = this.newNum(newDate.getHours())
            const minutes = this.newNum(newDate.getMinutes())
            const seconds = this.newNum(newDate.getSeconds())
            return year + '年' + month + '月' + date + '日 ' + hours + ':' + minutes + ':' + seconds
        },
        getScroll: function (s, box, l1, l2) {
            this[s].box = document.getElementById(box)
            this[s].l1 = document.getElementById(l1)
            this[s].l2 = document.getElementById(l2)
            this.autoScroll(s)
        },
        autoScroll: function (s) {
            const _this = this
            if (_this[s].l1.offsetHeight > _this[s].box.offsetHeight) {
                _this[s].l2.innerHTML = _this[s].l1.innerHTML// 克隆list1的数据，使得list2和list1的数据一样
                _this[s].scrollMove = setInterval(() => {
                    _this.scrollUp(s)
                }, 30)
            }
        },
        scrollUp: function (s) {
            if (this[s].box.scrollTop >= this[s].l1.offsetHeight) {
                this[s].box.scrollTop = 0
            } else {
                this[s].box.scrollTop++
            }
        },
        clearScroll: function (s) {
            clearInterval(this[s].scrollMove)
        },
        startScroll: function (s) {
            const _this = this
            _this[s].scrollMove = setInterval(() => {
                _this.scrollUp(s)
            }, 30)
        },
        loadWeather: function () {
            const wg = document.createElement('script')
            wg.innerHTML = `WIDGET = {
                                    CONFIG: {
                                    "modules": "01234",
                                    "background": 5,
                                    "tmpColor": "66C6FF",
                                    "cityColor": "66C6FF",
                                    "aqiColor": "66C6FF",
                                    "padding": "0 0 0 0",
                                    "shadow": "1",
                                    "language": "auto",
                                    "fixed": "false",
                                    "vertical": "middle",
                                    "horizontal": "center",
                                    "key": "073519a37e354911a98e3312e5b57047"
                                    }
                                }`
            const c = document.getElementsByTagName('script')[1]
            c.parentNode.insertBefore(wg, c)
            const hm = document.createElement('script')
            hm.src = 'https://widget.heweather.net/simple/static/js/he-simple-common.js?v=1.1'
            const s = document.getElementsByTagName('script')[0]
            s.parentNode.insertBefore(hm, s)
        }
    }
}
</script>

<style lang="less" scoped>
.main {
    background-image: url('../../static/img/bigData/wallpaper.jpg'); background-size: cover; width: 100%; height: 100%; position: absolute; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; user-select: none; overflow: hidden;
}
.header {
    height: 8rem; background: url('../../static/img/bigData/headerBg.png') center center no-repeat; background-size: 95%; display: flex; padding: 0 11.8rem; width: 100%; box-sizing: border-box; position: relative; z-index: 9;
    .name {
        flex: 1; display: flex; justify-content: center; align-items: center;
        .weather {
            margin-top: -1.5rem; height: 2.4rem;
            .s-sticker {
                font-size: 1.4rem !important;
            }
        }
        #time {
            font-size: 1.6rem; color:#66C6FF; margin-top: -1.5rem; margin-right: 3rem; height: 2.4rem; line-height: 2.4rem;
        }
    }
    .center {
        box-sizing: border-box; padding: 1.5rem 6rem; width: 82rem; position: relative;
        .bigTitle {
            font-size: 3rem; font-weight: bold; color: #66C6FF; text-align: center; line-height: 4rem; letter-spacing: 0.5rem;
        }
        .nav {
            position: absolute; display: flex; justify-content: space-between; box-sizing: border-box; padding: 1.5rem 10rem 0 14rem; width: 100%; top: 5.5rem;
            div {
                padding: 0 2.5rem; transform: skewX(45deg); cursor: pointer; border: 0.1rem #66C6FF solid; transition: background-color .3s; border-radius: 0.3rem;
                span {
                    color: #66C6FF; font-size: 1.8rem; display: block;height: 3rem; line-height: 3rem; transform: skewX(-45deg); transition: color .3s;
                }
                &:nth-child(-n + 2) {
                    transform: skewX(-45deg);
                    span {
                        transform: skewX(45deg);
                    }
                }
                &:nth-child(3) {
                    margin-left: 2rem;
                }
                &:hover, &.active {
                    background: #0D5DC8;
                    span {
                        color: #FFCE00; font-weight: bold;
                    }
                }
            }
        }
    }
    .right {
        flex: 1; display: flex; align-items: center; justify-content: flex-end; box-sizing: border-box; padding: 0 2rem;
        .userBox {
            display: flex; align-items: center; margin-top: -1.5rem;
            div {
                margin-right: 2rem; color: #66C6FF; cursor: pointer; line-height: 2rem;
                a {
                    color: #66C6FF; text-decoration: none;
                }
                .iconfont {
                    font-size: 1.6rem; margin-right: .5rem;
                }
            }
        }
    }
}

section.tbody {
    display: grid; grid-template-columns: 2fr 3fr 2fr; grid-gap: 2rem; padding: 0 2rem; height: calc(100vh - 12rem); position: absolute; bottom: 2rem; width: 100vw; box-sizing: border-box;
    .left,.right {
    }
    .center {
    }
}

.left {
    display: grid; grid-template-rows: 0 repeat(3, 1fr); grid-gap: 2rem; position: relative;
    .select {
        color: #66C6FF; height: 3rem; outline: none; text-align: center; width: 14.4rem; background: rgba(0,177,255,0.1);
        padding: 0 2rem; font-size: 1.6rem; position: absolute; top: -2rem;border: 0.1rem #0093FF solid;
        option {
            background: #0D5DC8;
            &:active {
                background: red;
            }
        }
    }
    .box {
        border: 0.1rem #0093FF solid; background: rgba(0,177,255,0.1); position: relative;
        .title {
            font-size: 2rem; color: #FFCE00; line-height: 5rem; display: flex; align-items: center; padding-left: 2rem; position: absolute; z-index: 2;
            &::before {
                content: " "; width: 0.3rem; height: 2rem; background-color: #FFCE00; margin-right: 1rem;
            }
        }
        &.tabs {
            .title {
                display: flex;
                &:before {
                    display: none;
                }
                h3 {
                    color: #00B1FF; font-size: 1.8rem; line-height: 5rem; cursor: pointer;
                    &.active {
                        color: #FFCE00;
                    }
                    &:nth-child(1) {
                        margin-right: 2.5rem;
                    }
                }
            }
        }
        .cont {
            height: 100%; width: 100%; position: relative;
            .pieSum {
                color: #FFFFFF; position: absolute; top: 50%; text-align: center; left: 24%; transform: translateY(-20%); width: 9rem;
                span {
                    font-size: 1.4rem; display: block;
                }
                b {
                    font-size: 2.4rem;
                }
            }
            #pie {
                width: 100%; height: 100%; position: absolute;
            }
        }
    }
}

.center {
    display: grid; grid-template-rows: 0 6rem 1fr; grid-gap: 2rem;
    .btns {
        display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; text-align: center; color: #FFFFFF;
        h3 {
            display: flex; justify-content: center; background: #05387D; cursor: pointer; transition: background-color .3s;
            span {
                font-size: 2.4rem; margin-right: 3rem;  line-height: 6rem;
            }
            b {
                font-size: 2.4rem; font-weight: bold; line-height: 6rem;
            }
            &.active {
                background: #0D5DC8;
            }
        }
    }
    .mapBox {
        position: relative; border: 0.1rem #00B1FF solid;
        .map {
            position: absolute; width: 100%; height: 100%; z-index: 1;
        }
        .legend {
            border-radius: 1rem; background: rgba(0,0,0,0.6); position: absolute; z-index: 2; padding: 1rem 2rem; bottom: 2rem; right: 2rem;
            .item {
                display: flex; align-items: center; height: 3rem;
                span {
                    display: inline-block; margin-right: 1rem;
                    width: 1.5rem; height: 1.5rem; border-radius: 1rem;
                    &.red {
                        background: red;
                    }
                    &.green {
                        background: #4FFF00;
                    }
                }
                b {
                    color: #FFFFFF;
                }
            }
        }
    }
}

.right {
    display: grid; grid-template-rows: repeat(2, 8rem) repeat(3, 1fr); grid-gap: 2rem;
    .box {
        border: 0.1rem #0093FF solid; background: rgba(0,177,255,0.1);
        .title {
            font-size: 2rem; color: #FFCE00; line-height: 5rem; display: flex; align-items: center; padding-left: 2rem;
            &::before {
                content: " "; width: 0.3rem; height: 2rem; background-color: #FFCE00; margin-right: 1rem;
            }
        }
        .cont {
            .slide {
                width: 100%; height: 15rem; overflow: hidden; padding: 0 3rem; box-sizing: border-box;
                #tb1, #tb2 {
                    div {
                        margin: 2rem 0;
                        span {
                            display: block; font-size: 1.6rem; color: #FFFFFF; line-height: 3.2rem;
                        }
                    }
                }
            }
            .table {
                width: 100%;
                dl, li {
                    display: grid; grid-template-columns: repeat(4, 1fr);
                }
                dl {
                    dt {
                        font-size: 1.6rem; font-weight: bold; color: #FFFFFF; background-color: #011858; line-height: 4rem; padding: 0 1rem; text-align: left;
                    }
                }
                .bm_cont {
                    overflow: hidden; height: 12rem;
                }
                ul {
                    li {
                        font-size: 1.6rem; color: #FFFFFF; padding: 0 1rem;
                        span {
                            line-height: 4rem;
                        }
                    }
                }
            }
            .ranking {
                overflow: hidden; height: 15rem; width: 100%; position: relative;
                ul {
                    margin: 0.5rem 2rem; display: grid; grid-template-columns: repeat(2, 1fr);
                    li {
                        display: flex; justify-content: space-between; height: 4rem; align-items: center;
                        &:nth-child(1) span:nth-child(1) { background: #ffd800; b {color: red;}}
                        &:nth-child(2) span:nth-child(1) { background: #adc0c4; b {color: #333333;}}
                        &:nth-child(3) span:nth-child(1) { background: #b2874e; b {color: #FFFFFF;}}
                        span {
                            font-size: 1.6rem; color: #FFFFFF; flex: none;
                            b {
                                position: absolute; z-index: 2; font-size: 1.6rem; color: rgba(255,255,255,0.5);
                            }
                            &:nth-child(1) {
                                background: rgba(0,0,0,0.3); border-radius: 2.6rem;  width: 2.6rem; height: 2.6rem; text-align: center; line-height: 2.6rem;
                                b {
                                    position: relative;
                                }
                            }
                            &:nth-child(2) {
                                margin-left: 1rem; flex: 1;
                            }
                        }
                    }
                }
            }
        }
        &.hasIcon {
            display: flex; justify-content: center; align-items: center;
            div {
                display: flex; flex: 1; justify-content: center;
                .iconfont {
                    font-size: 4.2rem; color: #FFFFFF;
                }
                h3 {
                    margin-left: 2rem;
                    i {
                        font-size: 1.8rem; color: #FFFFFF; font-style: normal; font-weight: normal;
                    }
                    b {
                        font-size: 2.8rem; font-weight: bold; display: block;color: #FFFFFF;
                    }
                }
            }
        }
        &.yujing {
            display: flex; align-items: center; justify-content: space-between; padding: 0 3rem; box-sizing: border-box;
            .leftTitle {
                font-size: 2rem; color: #FFCE00;
            }
            .icons {
                width: 8rem; height: 7rem; text-align: center;
                b {
                    font-size: 2.2rem; color: #FFFFFF; display: block; line-height: 4.4rem;
                }
                span {
                    font-size: 1.6rem;
                }
                &:nth-child(2) {
                    background: url('../../static/img/bigData/n1.svg') no-repeat; background-size: contain;
                    span {
                        color: #20C1ED;
                    }
                }
                &:nth-child(3) {
                    background: url('../../static/img/bigData/n2.svg') no-repeat; background-size: contain;
                    span {
                        color: #CE7F1E;
                    }
                }
                &:nth-child(4) {
                    background: url('../../static/img/bigData/n3.svg') no-repeat; background-size: contain;
                    span {
                        color: #CE0814;
                    }
                }
            }
        }
    }
}

.showModel {
    display: flex;
    .pic {
        width: 11rem; height: 14.4rem; background-color: #CCCCCC; margin-right: 1.5rem;
        display: flex; justify-content: center; align-items: center;
        img {
            max-width: 11rem; max-height: 14.4rem;
        }
    }
    .text {
        span {
            display: block; font-size: 1.4rem; line-height: 2.4rem; white-space: nowrap;
        }
        .name {
            font-family: '楷体'; font-size: 2.8rem; font-weight: bold; line-height: 4rem;
        }
        .zx {
            display: flex; justify-content: space-between;
            .zf_left {
                font-size: 1.4rem; line-height: 2.4rem;
                cursor: pointer; color: #0D5DC8;
                &:hover {
                    text-decoration: underline;
                }
            }
            img {
                cursor: pointer;
            }
        }
    }
}

.mapType {
    position: absolute; right: 2rem; top: 2rem; z-index: 8; display: flex;
    div {
        width: 5rem; height: 3rem; background: red; border-radius: .5rem; margin-left: .5rem; overflow: hidden; box-sizing: border-box;
        cursor: pointer; display: flex; justify-content: center; align-items: center; border: .1rem #FFFFFF solid; transition: all .3s;
        img {
            width: 5rem; height: 3rem;
        }
        &.active {
            border: .2rem red solid; box-shadow: 0 .5rem 1rem rgba(220, 0,0, 0.5);
        }
    }
}

/deep/.BMap_cpyCtrl span {
    font-size: 1rem;
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
    transition: all .3s ease;
}
.slide-fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10rem);
    opacity: 0;
}

.bounce-enter-active {
    animation: bounce-in .3s;
}
.bounce-leave-active {
    animation: bounce-in .3s reverse;
}
@keyframes bounce-in {
    0% {
        transform: scale(0); opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1); opacity: 1;
    }
}
.el-avatar {
    width: 3.2rem; height: 3.2rem; margin-top: 0.5rem;
}
</style>
